<template>
  <div class="myDoctors">
    <div class="header">
      <div class="title">
        <i-icon type="return" @click="backToUserCenter" i-class="myDoctorsBackIcon" />我的医生
      </div>
      <div class="search">
        <i-icon type="search" size="20" color="#cccccc" class="myDOctorsSearchIcon" />
        <input type="text" class="searchInput" placeholder="请输入搜素内容" v-model="searchValue" />
      </div>
    </div>
    <recommonded title="已关注"></recommonded>
    <recommonded title="名医推荐"></recommonded>
  </div>
</template>

<script>
import recommonded from "./components/recommonded";
export default {
  watch: {
    searchValue(newVal, oldVal) {
      console.log(newVal);
    }
  },
  components: {
    recommonded
  },
  methods: {
    backToUserCenter() {
      this.$router.back();
    }
  },
  data() {
    return {
      searchValue: ""
    };
  }
};
</script>

<style lang="scss" scoped>
.myDoctors {
  .header {
    width: 100%;
    height: 200rpx;
    background-color: #f3f1f4;
    box-sizing: border-box;
    padding: 0 20rpx;
    position: relative;
    .title {
      display: inline-block;
      margin-top: 40rpx;
      width: 100%;
      color: #000000;
      line-height: 60rpx;
      height: 60rpx;
      font-size: 36rpx;
    }
    .search {
      float: left;
      width: 100%;
      z-index: 100;
      bottom: 0;
      position: relative;
      margin-top: 30rpx;
      .myDOctorsSearchIcon {
        position: absolute;
        margin-left: 10rpx;
        color: #cccccc;
        top: 8rpx;
      }
      .searchInput {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        border: none;
        border-radius: 50rpx;
        background-color: #ffffff;
        color: #cccccc;
        font-size: 24rpx;
        box-sizing: border-box;
        padding: 0 50rpx;
      }
    }
  }
}
</style>
<style lang="scss">
.myDoctorsBackIcon {
  display: inline-block !important;
  font-size: 18px !important;
  line-height: 60rpx !important;
  height: 60rpx !important;
  vertical-align: baseline !important;
}
</style>